<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>videojs-mobile-ui Demo</title>
    <link href="./video-js.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.css" rel="stylesheet" />
    <style>
        video-js{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            pointer-events: none;
            display: none;
        }
    </style>
</head>
<body>
<video-js
        id="videojs-mobile-ui-player"
        class="video-js vjs-default-skin vjs-fluid"
        height="100%"
        controls
        playsinline
>
    <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegurl" />
</video-js>
<ul>
    <li><a href="test/">Run unit tests in browser.</a></li>
    <li><a href="docs/api/">Read generated docs.</a></li>
</ul>
<h2>Options</h2>
<ul id="options">
    <li>fullscreen:</li>
    <ul>
        <li>
            <input
                    type="checkbox"
                    data-section="fullscreen"
                    id="enterOnRotate"
            />enterOnRotate
        </li>
        <li>
            <input
                    type="checkbox"
                    data-section="fullscreen"
                    id="exitOnRotate"
            />exitOnRotate
        </li>
        <li>
            <input
                    type="checkbox"
                    data-section="fullscreen"
                    id="lockOnRotate"
            />lockOnRotate
        </li>
        <li>
            <input
                    type="checkbox"
                    data-section="fullscreen"
                    id="alwaysLockToLandscape"
            />alwaysLockToLandscape
        </li>
        <li>
            <input
                    type="checkbox"
                    data-section="fullscreen"
                    id="fullscreenDisabled"
            />disabled
        </li>
    </ul>
    <li>touchControls:</li>
    <ul>
        <li>
            <input
                    type="number"
                    data-section="touchControls"
                    id="seekSeconds"
            />seekSeconds
        </li>
        <li>
            <input
                    type="number"
                    data-section="touchControls"
                    id="tapTimeout"
            />tapTimeout
        </li>
        <li>
            <input
                    type="checkbox"
                    data-section="touchControls"
                    id="disableOnEnd"
            />disableOnEnd
        </li>
        <li>
            <input
                    type="checkbox"
                    data-section="touchControls"
                    id="touchControlsDisabled"
            />disabled
        </li>
    </ul>
</ul>
<button id="reload">Reload with options</button>
<ul id="log"></ul>
<script src="./video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.min.js"></script>
<script>
    (function (window, videojs) {
        var options = {
            fullscreen: {
                enterOnRotate: true,
                exitOnRotate: true,
                lockOnRotate: true,
                alwaysLockToLandscape: false,
                disabled: false,
            },
            touchControls: {
                seekSeconds: 10,
                tapTimeout: 300,
                disableOnEnd: false,
                disabled: false,
            },
        };

        var url = new URL(window.location);
        if (url.searchParams.has('options')) {
            options = JSON.parse(url.searchParams.get('options'));
        }

        console.log(JSON.stringify(options, null, 2));

        Object.keys(options).forEach(function (section) {
            Object.keys(options[section]).forEach(function (prop) {
                const val = options[section][prop];

                if (prop === 'disabled') {
                    prop = `${section}Disabled`;
                }

                if (typeof val === 'boolean') {
                    document.getElementById(prop).checked = val;
                }
                if (typeof val === 'number') {
                    document.getElementById(prop).value = val;
                }
            });
        });

        document
            .getElementById('options')
            .querySelectorAll('input')
            .forEach(function (opt) {
                opt.addEventListener('change', function () {
                    if (this.type === 'checkbox') {
                        const param = this.id.endsWith('Disabled')
                            ? 'disabled'
                            : this.id;

                        options[this.getAttribute('data-section')][param] =
                            this.checked;
                    } else {
                        options[this.getAttribute('data-section')][this.id] =
                            parseFloat(this.value);
                    }
                    console.log(options);
                });
            });

        document
            .getElementById('reload')
            .addEventListener('click', function () {
                url.searchParams.set('options', JSON.stringify(options));

                window.location = url.href;
            });

        window.addEventListener('orientationchange', function () {
            var el = document.createElement('li');
            var message =
                new Date().toTimeString().split(' ')[0] + ' ' + window.orientation;
            message +=
                screen && screen.orientation
                    ? ' ' + screen.orientation.type + ' ' + screen.orientation.angle
                    : '';
            el.textContent = message;
            console.log(message);
            document.getElementById('log').appendChild(el);
        });

        var testPlayer = (window.testPlayer = videojs(
            'videojs-mobile-ui-player'
        ));
        testPlayer.endscreen = function () {};
        testPlayer.mobileUi(options);
    })(window, window.videojs);
</script>
</body>
</html>